<template>
    <div class="app-container">
      <div style="padding: 20px 20px 0 20px;">
        授权角色：{{ $route.query.roleName }}
      </div>
      <el-tree
        style="margin: 20px 0"
        ref="tree"
        :data="sysMenuList"
        node-key="id"
        show-checkbox
        default-expand-all
        :props="defaultProps"
      />
      <div style="padding: 20px 20px;">
        <el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="save">保存</el-button>
        <el-button @click="$router.push('/system/sysRole')" size="mini" icon="el-icon-refresh-right">返回</el-button>
      </div>
    </div>
  </template>
  <script>
    import api from '@/api/menu/menu.js'
    export default {
      name: 'roleAuth',
  
      data() {
        return {
          loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
          sysMenuList: [], // 所有
          defaultProps: {
            children: 'children',
            label: 'name'
          },
        };
      },
  
      created() {
        this.fetchData()
      },
  
      methods: {
        /*
        初始化
        */
        fetchData() {
          const roleId = this.$route.query.id
          api.toAssign(roleId).then(result => {
            const sysMenuList = result.data
            this.sysMenuList = sysMenuList
            const checkedIds = this.getCheckedIds(sysMenuList)
            console.log('getPermissions() checkedIds', checkedIds)
            this.$refs.tree.setCheckedKeys(checkedIds)
          })
        },
  
        /*
        得到所有选中的id列表
        */
        getCheckedIds (auths, initArr = []) {
          return auths.reduce((pre, item) => {
            if (item.select && item.children.length === 0) {
              pre.push(item.id)
            } else if (item.children) {
              this.getCheckedIds(item.children, initArr)
            }
            return pre
          }, initArr)
        },
  
        /*
        保存权限列表
        */
        save() {
          debugger
          //获取到当前子节点
          //const checkedNodes = this.$refs.tree.getCheckedNodes()
          //获取到当前子节点及父节点
          const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
          let idList = allCheckedNodes.map(node => node.id);
          console.log(idList)
          let assginMenuVo = {
            roleId: this.$route.query.id,
            menuIdList: idList
          }
          this.loading = true
          api.doAssign(assginMenuVo).then(result => {
            console.log(result)
            this.loading = false
            this.$message.success(result.$message || '分配权限成功')
            this.$router.push('/system/sysRole');
          })
        }
      }
    };
  </script>